<!DOCTYPE html>
<html>

<head>
    <title>太空防御者</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background: #000;
        }

        #gameCanvas {
            background: linear-gradient(to bottom, #001, #003);
        }

        .powerup-menu {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(0, 0, 0, 0.9);
            padding: 20px;
            border: 2px solid #0ff;
            display: none;
        }

        .powerup-option {
            color: #fff;
            padding: 15px;
            margin: 10px;
            border: 1px solid #0ff;
            cursor: pointer;
            transition: all 0.3s;
        }

        .powerup-option:hover {
            background: #0ff;
            color: #000;
        }

        .hud {
            position: fixed;
            top: 10px;
            left: 10px;
            color: #0ff;
            font-family: Arial;
        }
    </style>
</head>

<body>
    <canvas id="gameCanvas"></canvas>
    <div class="powerup-menu" id="powerupMenu">
        <h2 style="color:#0ff;text-align:center">选择你的强化能力</h2>
        <div class="powerup-option" onclick="selectPowerup(0)"></div>
        <div class="powerup-option" onclick="selectPowerup(1)"></div>
        <div class="powerup-option" onclick="selectPowerup(2)"></div>
    </div>
    <div class="hud" id="hud"></div>

    <script>
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');
        canvas.width = 800;
        canvas.height = 600;
        // 输入处理
        const keys = {};
        // 游戏状态
        let gameState = {
            player: null,
            enemies: [],
            bullets: [],
            enemyBullets: [],
            particles: [],
            powerups: [],
            score: 0,
            level: 1,
            kills: 0,
            requiredKills: 5,
            isPaused: false,
            playerAbilities: {
                fireRate: 1,
                bulletCount: 1,
                bulletSpeed: 5,
                shield: 0,
                penetration: 0
            }
        };

        // 玩家类
        class Player {
            constructor() {
                this.x = canvas.width / 2;
                this.y = canvas.height - 50;
                this.size = 20;
                this.speed = 5;
                this.health = 100;
                this.maxHealth = 100;
                this.shootCooldown = 0;
            }

            shoot() {
                if (this.shootCooldown <= 0) {
                    const angleStep = Math.PI / 16;
                    const count = gameState.playerAbilities.bulletCount;

                    for (let i = 0; i < count; i++) {
                        const angle = -Math.PI / 2 + (i - (count - 1) / 2) * angleStep;
                        gameState.bullets.push({
                            x: this.x,
                            y: this.y,
                            dx: Math.cos(angle) * gameState.playerAbilities.bulletSpeed,
                            dy: Math.sin(angle) * gameState.playerAbilities.bulletSpeed,
                            damage: 10,
                            penetration: gameState.playerAbilities.penetration
                        });
                    }
                    this.shootCooldown = 10 / gameState.playerAbilities.fireRate;
                }
            }

            update() {
                if (this.shootCooldown > 0) this.shootCooldown--;
            }

            draw() {
                ctx.fillStyle = '#0ff';
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
                ctx.fill();
            }
        }

        // 初始化游戏
        function initGame() {
            gameState.player = new Player();
            gameState.enemies = [];
            gameState.bullets = [];
            gameState.enemyBullets = [];
            gameState.particles = [];
            gameState.score = 0;
            gameState.level = 1;
            gameState.kills = 0;
            gameState.requiredKills = 5;
            gameState.playerAbilities = {
                fireRate: 1,
                bulletCount: 1,
                bulletSpeed: 5,
                shield: 0,
                penetration: 0
            };
        }

        // 生成敌人
        function spawnEnemy() {
            const type = Math.random() < 0.2 + gameState.level * 0.05 ? 'shooter' : 'basic';

            const enemy = {
                x: Math.random() * canvas.width,
                y: -30,
                speed: 1 + gameState.level * 0.3,
                health: 10 + gameState.level * 5,
                type: type,
                shootCooldown: type === 'shooter' ? 100 : 0,
                pattern: Math.floor(Math.random() * 3)
            };

            gameState.enemies.push(enemy);
        }

        // 更新子弹
        function updateBullets() {
            gameState.bullets.forEach((bullet, index) => {
                bullet.x += bullet.dx;
                bullet.y += bullet.dy;

                // 移除超出屏幕的子弹
                if (bullet.x < 0 || bullet.x > canvas.width || bullet.y < 0 || bullet.y > canvas.height) {
                    gameState.bullets.splice(index, 1);
                }

                // 检查子弹与敌人的碰撞
                gameState.enemies.forEach((enemy, enemyIndex) => {
                    const dx = bullet.x - enemy.x;
                    const dy = bullet.y - enemy.y;
                    const distance = Math.sqrt(dx * dx + dy * dy);

                    if (distance < enemy.size + 5) {
                        enemy.health -= bullet.damage;
                        bullet.penetration--;
                        if (bullet.penetration < 0) {
                            gameState.bullets.splice(index, 1);
                        }
                        if (enemy.health <= 0) {
                            gameState.enemies.splice(enemyIndex, 1);
                            gameState.kills++;
                            gameState.score += 10;
                        }
                    }
                });
            });
        }

        // 更新敌人
        function updateEnemies() {
            gameState.enemies.forEach((enemy, index) => {
                enemy.y += enemy.speed;

                // 移除超出屏幕的敌人
                if (enemy.y > canvas.height) {
                    gameState.enemies.splice(index, 1);
                }

                // 敌人射击
                if (enemy.type === 'shooter') {
                    if (enemy.shootCooldown <= 0) {
                        const angle = Math.atan2(gameState.player.y - enemy.y, gameState.player.x - enemy.x);
                        gameState.enemyBullets.push({
                            x: enemy.x,
                            y: enemy.y,
                            dx: Math.cos(angle) * 3,
                            dy: Math.sin(angle) * 3,
                            damage: 10
                        });
                        enemy.shootCooldown = 100;
                    } else {
                        enemy.shootCooldown--;
                    }
                }

                // 检查敌人与玩家的碰撞
                const dx = enemy.x - gameState.player.x;
                const dy = enemy.y - gameState.player.y;
                const distance = Math.sqrt(dx * dx + dy * dy);

                if (distance < enemy.size + gameState.player.size) {
                    gameState.player.health -= 20;
                    gameState.enemies.splice(index, 1);
                }
            });

            // 更新敌人子弹
            gameState.enemyBullets.forEach((bullet, index) => {
                bullet.x += bullet.dx;
                bullet.y += bullet.dy;

                // 移除超出屏幕的子弹
                if (bullet.x < 0 || bullet.x > canvas.width || bullet.y < 0 || bullet.y > canvas.height) {
                    gameState.enemyBullets.splice(index, 1);
                }

                // 检查敌人子弹与玩家的碰撞
                const dx = bullet.x - gameState.player.x;
                const dy = bullet.y - gameState.player.y;
                const distance = Math.sqrt(dx * dx + dy * dy);

                if (distance < gameState.player.size + 5) {
                    gameState.player.health -= bullet.damage;
                    gameState.enemyBullets.splice(index, 1);
                }
            });
        }

        // 更新游戏逻辑
        function updateGame() {
            if (gameState.isPaused) return;

            // 玩家移动
            if (keys.ArrowLeft) gameState.player.x = Math.max(gameState.player.size, gameState.player.x - gameState.player.speed);
            if (keys.ArrowRight) gameState.player.x = Math.min(canvas.width - gameState.player.size, gameState.player.x + gameState.player.speed);
            if (keys.Space) gameState.player.shoot();

            // 更新玩家
            gameState.player.update();

            // 更新子弹
            updateBullets();

            // 更新敌人
            updateEnemies();

            // 生成敌人
            if (Math.random() < 0.02 + gameState.level * 0.005) {
                spawnEnemy();
            }

            // 检查升级
            if (gameState.kills >= gameState.requiredKills) {
                showPowerupMenu();
                gameState.kills = 0;
                gameState.requiredKills = 5 + gameState.level * 2;
                gameState.level++;
            } 
        }

        // 能力升级系统
        const powerupList = [
            { name: '射速提升', effect: p => p.fireRate *= 1.3 },
            { name: '子弹数量+1', effect: p => p.bulletCount++ },
            { name: '护盾充能', effect: p => p.shield += 20 },
            { name: '穿甲弹', effect: p => p.penetration++ },
            { name: '速度提升', effect: p => p.bulletSpeed *= 1.2 },
            { name: '生命恢复', effect: p => gameState.player.health = Math.min(gameState.player.maxHealth, gameState.player.health + 30) }
        ];

        function showPowerupMenu() {
            gameState.isPaused = true;
            const menu = document.getElementById('powerupMenu');
            const options = menu.getElementsByClassName('powerup-option');

            // 随机选取三个不重复的能力
            const selected = [];
            while (selected.length < 3) {
                const p = powerupList[Math.floor(Math.random() * powerupList.length)];
                if (!selected.includes(p)) selected.push(p);
            }

            selected.forEach((p, i) => {
                options[i].textContent = p.name;
                options[i].powerupEffect = p.effect;
            });

            menu.style.display = 'block';
        }

        function selectPowerup(index) {
            const selected = document.getElementsByClassName('powerup-option')[index];
            const effect = selected.powerupEffect;
            effect(gameState.playerAbilities);

            document.getElementById('powerupMenu').style.display = 'none';
            gameState.isPaused = false;
        }

        // 绘制游戏元素
        function drawGame() {
            // 绘制玩家
            gameState.player.draw();

            // 绘制子弹
            gameState.bullets.forEach(bullet => {
                ctx.fillStyle = '#fff';
                ctx.beginPath();
                ctx.arc(bullet.x, bullet.y, 3, 0, Math.PI * 2);
                ctx.fill();
            });

            // 绘制敌人
            gameState.enemies.forEach(enemy => {
                ctx.fillStyle = '#f00';
                ctx.beginPath();
                ctx.arc(enemy.x, enemy.y, 15, 0, Math.PI * 2);
                ctx.fill();
            });

            // 绘制敌人子弹
            gameState.enemyBullets.forEach(bullet => {
                ctx.fillStyle = '#ff0';
                ctx.beginPath();
                ctx.arc(bullet.x, bullet.y, 3, 0, Math.PI * 2);
                ctx.fill();
            });

            // 绘制 HUD
            const hud = document.getElementById('hud');
            hud.textContent = `分数: ${gameState.score} 等级: ${gameState.level} 生命值: ${gameState.player.health}`;
        }

        // 游戏循环
        function gameLoop() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            updateGame();
            drawGame();
            requestAnimationFrame(gameLoop);
        }

        // 初始化
        initGame();
        gameLoop();

       
        window.addEventListener('keydown', e => keys[e.key] = true);
        window.addEventListener('keyup', e => keys[e.key] = false);
    </script>
</body>

</html>